<template>
  <div class="containers">
    <div class="canvas" ref='canvas'></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
    <div class="buttons">
      <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
      <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
    </div>

    <el-dialog title="bpmn编辑按钮事件" :visible.sync="nodeVisible" width="30%">
      <p>节点类型：{{nodeInfo.type}} </p>
      <p>节点id:{{nodeInfo.id}}</p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="toggeleNodeInfo">取 消</el-button>
        <el-button type="primary" @click="toggeleNodeInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Modeler from "./customModeler"; // 引入自定义面板流程图
import propertiesPanelModule from "bpmn-js-properties-panel"; //  这里引入的是右侧属性栏这个框
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda"; // 而这个引入的是右侧属性栏里的内容
import zhCN from "./customTranslate";// 中文
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";//外部任务配置
import customModule from './custom'// 自定义的节点
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      modeler: null,
    };
  },
  mounted() {
    // 生成实例
    this.modeler = new Modeler({
      container: this.$refs.canvas,
      width: '100%',
      height: '100%',
      propertiesPanel: {
        parent: "#js-properties-panel",
      },
      additionalModules: [
        propertiesPanelModule, // 右边工具栏
        propertiesProviderModule, // 右边的工具栏
        { translate: ["value", zhCN] }, // 中文
        // customModule
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
      },
    });


    this.createNewDiagram();// 新增流程定义
    this.bpmnEvent();
  },
  methods: {
    ...mapMutations({ toggeleNodeInfo: 'bpmn_store/toggeleNodeInfo' }),
    //注册节点事件，可以写多个事件
    bpmnEvent() {
      const eventBus = this.modeler.get("eventBus");
      ["element.click", "element.hover", 'element.changed'].forEach((eventType) => {
        eventBus.on(eventType, (e) => {
          const { element } = e;
          // console.log(eventType, element);
          if (!e || !element || !element.parent || element.type === "bpmn:Process") return; //这里我的根元素是bpmn:Process
          if (eventType === "element.click") {
            console.log(element);
            // this.changeColor(element)
            // this.overlays(element)
          } else if (eventType === "element.hover") {
            // 鼠标滑过节点后想要做的处理
            // console.log("鼠标经过节点啦~");
          } else if (eventType === "element.changed") {
            console.log('元素改变触发');
          }
        });
      });
    },
    // 后退
    handleUndo() {
      this.modeler.get("commandStack").undo();
    },
    // 前进
    handleRedo() {
      this.modeler.get("commandStack").redo();
    },
    // 新增流程定义
    createNewDiagram() {
      // 自定义的xml模板，可以自己修改
      const xml = sessionStorage.getItem("xml");
      const diagramXML = `<?xml version="1.0" encoding="UTF-8"?>↵<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_0fppxr8" targetNamespace="http://bpmn.io/schema/bpmn"><bpmn:process id="Process_stVZbQ" name="失业保险" isExecutable="true"><bpmn:startEvent id="StartEvent_1" name="begin&#10;" camunda:formKey="{&#34;list&#34;:[{&#34;type&#34;:&#34;input&#34;,&#34;icon&#34;:&#34;icon-input&#34;,&#34;options&#34;:{&#34;width&#34;:&#34;100%&#34;,&#34;defaultValue&#34;:&#34;&#34;,&#34;required&#34;:false,&#34;dataType&#34;:&#34;string&#34;,&#34;pattern&#34;:&#34;&#34;,&#34;placeholder&#34;:&#34;&#34;,&#34;disabled&#34;:false,&#34;remoteFunc&#34;:&#34;func_1599795735000_43209&#34;},&#34;name&#34;:&#34;问题类型&#34;,&#34;key&#34;:&#34;1599795735000_43209&#34;,&#34;model&#34;:&#34;problemType&#34;,&#34;rules&#34;:[{&#34;type&#34;:&#34;string&#34;,&#34;message&#34;:&#34;问题类型格式不正确&#34;}]},{&#34;type&#34;:&#34;color&#34;,&#34;icon&#34;:&#34;icon-color&#34;,&#34;options&#34;:{&#34;defaultValue&#34;:&#34;&#34;,&#34;disabled&#34;:false,&#34;showAlpha&#34;:false,&#34;required&#34;:false,&#34;remoteFunc&#34;:&#34;func_1602746485000_64246&#34;},&#34;name&#34;:&#34;颜色选择器&#34;,&#34;key&#34;:&#34;1602746485000_64246&#34;,&#34;model&#34;:&#34;color_1602746485000_64246&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;radio&#34;,&#34;icon&#34;:&#34;icon-radio-active&#34;,&#34;options&#34;:{&#34;inline&#34;:false,&#34;defaultValue&#34;:&#34;&#34;,&#34;showLabel&#34;:false,&#34;options&#34;:[{&#34;value&#34;:&#34;Option 1&#34;,&#34;label&#34;:&#34;Option 1&#34;},{&#34;value&#34;:&#34;Option 2&#34;,&#34;label&#34;:&#34;Option 2&#34;},{&#34;value&#34;:&#34;Option 3&#34;,&#34;label&#34;:&#34;Option 3&#34;}],&#34;required&#34;:false,&#34;width&#34;:&#34;&#34;,&#34;remote&#34;:false,&#34;remoteOptions&#34;:[],&#34;props&#34;:{&#34;value&#34;:&#34;value&#34;,&#34;label&#34;:&#34;label&#34;},&#34;remoteFunc&#34;:&#34;func_1602746487000_90659&#34;,&#34;disabled&#34;:false},&#34;name&#34;:&#34;单选框组&#34;,&#34;key&#34;:&#34;1602746487000_90659&#34;,&#34;model&#34;:&#34;radio_1602746487000_90659&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;textarea&#34;,&#34;icon&#34;:&#34;icon-diy-com-textarea&#34;,&#34;options&#34;:{&#34;width&#34;:&#34;100%&#34;,&#34;defaultValue&#34;:&#34;&#34;,&#34;required&#34;:false,&#34;disabled&#34;:false,&#34;pattern&#34;:&#34;&#34;,&#34;placeholder&#34;:&#34;&#34;,&#34;remoteFunc&#34;:&#34;func_1599795736000_77890&#34;},&#34;name&#34;:&#34;问题描述&#34;,&#34;key&#34;:&#34;1599795736000_77890&#34;,&#34;model&#34;:&#34;des&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;textarea&#34;,&#34;icon&#34;:&#34;icon-diy-com-textarea&#34;,&#34;options&#34;:{&#34;width&#34;:&#34;100%&#34;,&#34;defaultValue&#34;:&#34;&#34;,&#34;required&#34;:false,&#34;disabled&#34;:false,&#34;pattern&#34;:&#34;&#34;,&#34;placeholder&#34;:&#34;&#34;,&#34;remoteFunc&#34;:&#34;func_1599795737000_37954&#34;},&#34;name&#34;:&#34;其他&#34;,&#34;key&#34;:&#34;1599795737000_37954&#34;,&#34;model&#34;:&#34;other&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;fileupload&#34;,&#34;icon&#34;:&#34;icon-wenjianshangchuan&#34;,&#34;options&#34;:{&#34;defaultValue&#34;:[],&#34;disabled&#34;:false,&#34;length&#34;:5,&#34;multiple&#34;:false,&#34;isDelete&#34;:true,&#34;remoteFunc&#34;:&#34;func_1599795743000_4020&#34;},&#34;name&#34;:&#34;文件&#34;,&#34;key&#34;:&#34;1599795743000_4020&#34;,&#34;model&#34;:&#34;fileupload&#34;,&#34;rules&#34;:[]}],&#34;config&#34;:{&#34;labelWidth&#34;:120,&#34;labelPosition&#34;:&#34;right&#34;,&#34;tableName&#34;:&#34;&#34;,&#34;size&#34;:&#34;mini&#34;}}"><bpmn:outgoing>SequenceFlow_1l0ax8h</bpmn:outgoing></bpmn:startEvent><bpmn:sequenceFlow id="SequenceFlow_1l0ax8h" sourceRef="StartEvent_1" targetRef="Task_0lr8bvq" /><bpmn:userTask id="Task_0lr8bvq" camunda:assignee="qinlil" camunda:candidateGroups=""><bpmn:incoming>SequenceFlow_1l0ax8h</bpmn:incoming><bpmn:outgoing>SequenceFlow_1o718gl</bpmn:outgoing></bpmn:userTask><bpmn:endEvent id="EndEvent_19wmu5l"><bpmn:incoming>SequenceFlow_1o718gl</bpmn:incoming></bpmn:endEvent><bpmn:sequenceFlow id="SequenceFlow_1o718gl" sourceRef="Task_0lr8bvq" targetRef="EndEvent_19wmu5l" /></bpmn:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_stVZbQ"><bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"><dc:Bounds x="173" y="102" width="36" height="36" /><bpmndi:BPMNLabel><dc:Bounds x="178" y="145" width="27" height="27" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNEdge id="SequenceFlow_1l0ax8h_di" bpmnElement="SequenceFlow_1l0ax8h"><di:waypoint x="209" y="120" /><di:waypoint x="259" y="120" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="UserTask_196ql50_di" bpmnElement="Task_0lr8bvq"><dc:Bounds x="259" y="80" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="EndEvent_19wmu5l_di" bpmnElement="EndEvent_19wmu5l"><dc:Bounds x="409" y="102" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNEdge id="SequenceFlow_1o718gl_di" bpmnElement="SequenceFlow_1o718gl"><di:waypoint x="359" y="120" /><di:waypoint x="409" y="120" /></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn:definitions>"
        `;
      // 在实例中导入xml
      // this.modeler.importXML(diagramXML, function (err) {
      //   if (err) {
      //     console.error(err);
      //   }
      // });

      this.modeler.importXML(diagramXML).then((result) => {
        const { warnings } = result;
        console.log('success !', warnings);
        this.modeler.get('canvas').zoom('fit-viewport');
      }).catch(function (err) {
        const { warnings, message } = err;
        console.log('something went wrong:', warnings, message);
      })


    },
  },
  computed: {
    ...mapState({
      nodeVisible: state => state.bpmn_store.nodeVisible,
      nodeInfo: state => state.bpmn_store.nodeInfo,
    }),
  },
};
</script>

<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
/*右边工具栏样式*/
@import "~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
@import "./custom/index.scss";
.highlight-overlay {
  background-color: green; /* color elements as green */
  opacity: 0.4;
  pointer-events: none; /* no pointer events, allows clicking through onto the element */
}

.bjs-powered-by {
  display: none;
}
.buttons {
  position: absolute;
  bottom: 40px;
  left: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
  & > li {
    display: inline-block;
    margin-right: 10px;
    & > a {
      background: #ddd;
      border: solid 1px #666;
      display: inline-block;
      padding: 5px;
      &.active {
        opacity: 1;
      }
    }
  }
}
.properties-panel-parent {
  width: 260px;
  border-left: 1px solid #ccc;
  overflow: auto;
  position: absolute;
  top: 21px;
  right: 21px;
  height: calc(100% - 40px);
  &:empty {
    display: none;
    &.djs-properties-panel {
      padding-bottom: 70px;
      min-height: 100%;
    }
  }
}

.containers {
  position: absolute;
  background-color: #ffffff;
  width: calc(100% - 20px);
  height: calc(100% - 40px);
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>